<template>
  <div class="content">
    <div class="mlr">
      <h1 class="bt">{{ zuofa }}做法大全</h1>
      <ul class="nr">
        <li v-for="p in data" :key="p.caipin_id">
          <div @click="$router.push(`/tongyongzuofa1?type=${p.caipin_id}&name=${p.xleixing}&dlx=${dleixin}`)">
            <img
              :src="`/小组项目图片/健康食疗/${dleixin}/${p.xleixing}/${p.caipin}/${p.tupian1}`"
            />
            <span>{{ p.caipin }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [], //用于存储请求回来的数据
      zuofa: "",
      dleixin:''
    };
  },
  mounted() {
    this.ShiLiao();
  },
  methods: {
    ShiLiao() {
      let url = `http://127.0.0.1:3000/v1/Jiankangshiliao/jutizuofa/${this.$route.query.type}`;
      this.axios.get(url).then((res) => {
        console.log(res);
        // 请求的数据保存在data中
        this.data = res.data.data;
        // 打印点击的菜品
        console.log(this.$route.query.type1);
        this.zuofa = this.$route.query.type;
        this.dleixin = this.$route.query.type1;
      });
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.content {
  padding-top: 6px;
  padding-bottom: 12px;
}
.mlr {
  margin-left: 10px;
  margin-right: 10px;
}
.bt {
  height: 47px;
  line-height: 47px;
  color: #817c74;
  font-size: 18px;
  text-align: left;
}
.nr {
  margin-top: -12px;
  list-style: none;
}
.nr li {
  margin-top: 12px;
  border: 1px solid #eae6e3;
  background-color: #fff;
}
.nr li div {
  text-decoration: none;
  cursor: pointer;
}
img {
  display: inline;
  margin-right: 10px;
  vertical-align: middle;
}
span {
  color: #fa7e3e;
  font-size: 16px;
  line-height: 55px;
}
</style>